<template>
  <div>
    <div class="bgImg">
        <span class="small" @click="prev">&lt;</span>
      <div class="inp">
        <input type="text" placeholder="请输入礼券码" />
        <button class="changeBtn">兑换</button>
      </div>
    </div>
    <div class="red-card1">
      <ul>
        <li class="one">1元</li>
        <li class="two">
          <p class="reduce">满减1</p>
          <p>满0元使用</p>
        </li>
        <li class="three">
          <button>立即领取</button>
        </li>
      </ul>
      <p class="time">领取7天内有效</p>
    </div>
    <div class="red-card2">
      <ul>
        <li class="one">1元</li>
        <li class="two">
          <p class="reduce">满减</p>
          <p>满100元使用</p>
        </li>
        <li class="three">
          <button>立即领取</button>
        </li>
      </ul>
      <p class="time">领取7天内有效</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
      prev(){
          this.$router.go(-1)
      }
  },
};
</script>
<style lang="scss" scoped>
p {
  margin: 0 0;
}
.bgImg {
  width: 100%;
  height: 40vh;
  background: url("../../assets/imgs/star.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .small{
      display: inline-block;
      position: absolute;
        top: 3vw;
        left: 3vw;
        font-size: 5vw;
  }
  .inp {
    position: absolute;
    top: 51vw;
    left: 12vw;
    input {
      height: 8vw;
      border: 1px solid #fcc49e;
      border-radius: 2vw;
      color: #ee7c7b;
    }
    button {
      width: 19vw;
      height: 9vw;
      background-color: #ee7c7b;
      color: white;
      font-size: 3vw;
      border: none;
      margin-left: 2vw;
      border-radius: 3vw;
    }
  }
}
.red-card1 {
  width: 95%;
  height: 30vw;
  background-color: #ec7877;
  color: white;
  border-radius: 3vw;
  margin: 3vw 0 2vw;
  margin-left: 2.5vw;
  box-sizing: border-box;
  ul {
    display: flex;
    width: 100%;
    align-items: center;
    li {
      height: 15vw;
    //   background-color: wheat;
    }
    .one {
      width: 20%;
      line-height: 15vw;
    }
    .two {
      width: 50%;
      .reduce {
        margin: 2vw 0;
      }
    }
    .three {
      width: 30%;
      button {
        background-color: #fce8e7;
        border: none;
        border-radius: 2vw;
        color: #cc7773;
        margin-top: 5vw;
      }
    }
  }
  .time {
    margin-top: 7vw;
    text-align: left;
    height: 8vw;
    padding-left: 2vw;
    border-bottom-left-radius: 2vw;
    border-bottom-right-radius: 2vw;
    background-color: #cc7773;
  }
}
.red-card2 {
  width: 95%;
  height: 30vw;
  background-color: #ec7877;
  color: white;
  border-radius: 3vw;
  margin-left: 2.5vw;
  box-sizing: border-box;

  ul {
    display: flex;
    width: 100%;
    align-items: center;
    li {
      height: 15vw;
    //   background-color: wheat;
    }
    .one {
      width: 20%;
      line-height: 15vw;
    }
    .two {
      width: 50%;
      .reduce {
        margin: 2vw 0;
      }
    }
    .three {
      width: 30%;
      button {
        background-color: #fce8e7;
        border: none;
        border-radius: 2vw;
        color: #cc7773;
        margin-top: 5vw;
      }
    }
  }
  .time {
    margin-top: 7vw;
    text-align: left;
    height: 8vw;
    padding-left: 2vw;
    border-bottom-left-radius: 2vw;
    border-bottom-right-radius: 2vw;
    background-color: #cc7773;
  }
}
</style>